<template>
	<view class="pages-view">
		<view style="padding: 30rpx 30rpx 10rpx 30rpx;">
			<!-- 搜索 -->
			<view class="flex-between">
				<view class="search-view flex-alignItems-center">
					<u-icon name="search" color="#333333" size="25"></u-icon>
					<input type="text" class="search-input" v-model="search" placeholder="搜索地名" />
				</view>
				<view class="search-btn flex-center margin-right10" @click="handleSearch">搜索</view>
				<view class="search-btn1 flex-center" @click="initSearch">重置</view>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="flex-alignItems-center filters-view">
			<view class="filters-view-item">
				<view class="flex-between" @click="riskTypeShow = true" v-if="riskTypeName">
					<view class="fontSize-12 color-000 margin-right10">{{riskTypeName}}</view>
					<!-- 	<u-icon name="arrow-up" color="#333333" size="15" v-if="false"></u-icon> -->
					<u-icon name="arrow-down" color="#999999" size="15"></u-icon>
				</view>
				<view class="flex-between" @click="riskTypeShow = true" v-else>
					<view class="fontSize-12 color-999 margin-right10">风险类型</view>
					<!-- <u-icon name="arrow-up" color="#333333" size="15" v-if="false"></u-icon> -->
					<u-icon name="arrow-down" color="#999999" size="15"></u-icon>
				</view>
			</view>
			<!-- <view class="filters-view-item1">
				
			</view> -->
			<!-- <view class="flex-alignItems-center filters-view-item">
				<view class="fontSize-12 color-000 margin-right10">标签</view>
				<u-icon name="arrow-up" color="#333333" size="15" v-if="false"></u-icon>
				<u-icon name="arrow-down" color="#333333" size="15" v-else></u-icon>
			</view> -->
			<!-- <view class="filters-view-item1">
				
			</view> -->
			<view class="flex-between filters-view-item1" @click="starShow = true">
				<view class="fontSize-12 color-000 margin-right10" v-if="starName">{{starName}}</view>
				<view class="fontSize-12 color-999 margin-right10" v-else>开始日期</view>
				<u-icon name="arrow-down" color="#999999" size="15"></u-icon>
			</view>
			<view class="flex-between filters-view-item1" @click="openEndShow">
			<view class="fontSize-12 color-000 margin-right10" v-if="endName">{{endName}}</view>
				<view class="fontSize-12 color-999 margin-right10" v-else>结束日期</view>
				<u-icon name="arrow-down" color="#999999" size="15"></u-icon>
			</view>
		</view>

		<!-- 列表 -->
		<view class="list-view">
			<view class="item-view" v-for="(item,index) in list" :key="index"
				@click="$tools.navigateTo('/pages/data-acquisition/collection-message-edit?id='+item.id)">
				<view class="flex1">
					<view class="flex-between margin-bottom20">
						<view class="flex-alignItems-center">
							<view class="fontSize-13 color-000 text-ellipsis" style="max-width: 380rpx;">
								{{item.location}}</view>
							<view class="list-item-icon" v-if="item.riskType.desc"></view>
							<view class="fontSize-13" style="color: #336FFF;">{{item.riskType.desc}}</view>
						</view>
						<view class="flex-alignItems-center">
							<view class="margin-right30">
								<u-icon name="edit-pen" color="#808080" size="20"></u-icon>
							</view>
							<view @click.stop="handleDelete(item.id)">
								<u-icon name="trash" color="#808080" size="20"></u-icon>
							</view>
						</view>
					</view>
					<view class="flex-between">
						<view class="fontSize-13 color-808080 text-ellipsis" style="max-width: 300rpx;">{{item.remark}}
						</view>
						<view class="fontSize-13 color-999">{{item.createTime}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="list.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" width="150px"
			height="150px" text="暂无数据" textSize="18">
		</u-empty>
		<view style="padding-bottom: 100rpx;">
			<u-loadmore v-if="loading" status="loading" />
			<u-loadmore v-if="isLastPage" status="nomore" />
		</view>

		<!-- 底部操作栏 -->
		<view style="height: 200rpx;"></view>
		<!-- <view class="report-fixed-view flex-alignItems-center padding-30 bg-fff" style="box-shadow: 0rpx -1rpx 4rpx 1rpx rgba(0,0,0,0.1);">
			<view class="report-view-btn2 flex-center">全选/取消</view>
			<view class="report-view-btn1 flex-center" @click="SubmitEvent">
				提交审核
			</view>
		</view> -->
		<!-- 风险值弹窗 -->
		<u-picker :show="riskTypeShow" :columns="riskTypeColumns" keyName="label" @cancel="cancelRiskType"
			@confirm="confirmRiskType"></u-picker>
		<!-- 开始范围 -->
		<u-datetime-picker :show="starShow" v-model="starValue" mode="date" @cancel="starCancel" @confirm="starConfirm"></u-datetime-picker>
		<!-- 结束范围 -->
		<u-datetime-picker :show="endShow" v-model="endValue" mode="date" @cancel="endCancel" @confirm="endConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '', // 搜索
				params: {
					current: 1,
					size: 10,
					model: {
						collectTimeEnd:'', // 结束时间
						collectTimeStart:'', // 开始时间
						region:'', // 行政区划
						riskType:'', // 风险类型
						userKeyword:'', // 标签
						workNo:'' // 工点编号
					}
				},
				list: [], // 列表
				isLastPage: false,
				loading: false,
				riskTypeShow: false, // 风险类型
				riskTypeColumns: [
					[{
							label: '崩塌滑坡',
							status: 'SLOPE'
						},
						{
							label: '泥石流',
							status: 'DEBRIS'
						},
						{
							label: '沉陷水毁',
							status: 'SUBSIDE'
						}
					]
				], // 风险列表
				riskTypeName: '', // 风险类型名称
				riskTypeStatus: '', // 风险类型状态
				starValue: Number(new Date()), // 开始时间
				starShow:false, // 是否开始时间弹窗
				starName:'', // 开始时间name
				endShow:false, // 是否结束时间弹窗
				endValue:Number(new Date()), // 结束时间
				endName:'', // 结束时间
			}
		},
		onShow() {
			this.params.current = 1
			this.params.size = 10
			this.list = []
			this.getList()
		},
		// 刷新 上拉刷新
		onPullDownRefresh() {
			this.params.current = 1
			this.isLastPage = false
			this.list = []
			this.getList().finally(() => {
				// 停止当前页面下拉刷新
				uni.stopPullDownRefresh();
			});
		},
		// 加载下一页 下拉加载
		onReachBottom() {
			if (this.list.length >= this.params.current * this.params.size) {
				this.isLastPage = false;
				this.params.current += 1
				this.getList();
			} else {
				this.isLastPage = true
			}
		},
		methods: {
			// 重置
			initSearch(){
				this.params.current = 1
				this.params.size = 10
				this.params.model.collectTimeEnd = ''
				this.endName = ''
				this.params.model.collectTimeStart = ''
				this.starName = ''
				this.params.model.region = ''
				this.search = ''
				this.params.model.riskType = ''
				this.riskTypeName = ''
				this.list = []
				this.getList()
			},
			// 打开结束时间弹窗
			openEndShow(){
				this.endShow = true
			},
			// 确认结束时间
			endConfirm(e){
				this.endName = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.params.model.collectTimeEnd = this.endName
				this.endShow = false
			},
			// 取消结束时间
			endCancel(){
				this.endName = ''
				this.endShow = false
			},
		    // 确认开始时间
			starConfirm(e){
				console.log(e)
				this.starName = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.params.model.collectTimeStart = this.starName
				this.starShow = false
			},
			// 取消开始时间
			starCancel(){
				this.starName = ''
				this.starShow = false
			},
			// 删除列表
			handleDelete(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除采集标记点',
					success: function(res) {
						if (res.confirm) {
							that.$http.delete(`manual-collect?ids[]=` + id, {}, {
								token: true
							}).then(res => {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								that.params.current = 1
								that.params.size = 10
								that.list = []
								that.getList()
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消删除',
								icon: 'none'
							})
						}
					}
				});
			},
			// 确认风险类型选择
			confirmRiskType(e) {
				console.log(e)
				this.riskTypeName = e.value[0].label
				let status = e.value[0].status
				this.params.model.riskType = status
				this.riskTypeShow = false
			},
			// 取消风险类型选择
			cancelRiskType() {
				this.riskTypeName = ''
				this.riskTypeShow = false
			},
			// 搜索
			handleSearch() {
				this.params.current = 1
				this.params.size = 10
				this.params.model.region = this.search
				this.list = []
				this.getList()
			},
			async getList() {
				let res = await this.$http.post(this.$api.manualCollectPage, this.params, {
					token: true
				})
				this.list = [...this.list, ...res.data.records]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-btn1 {
		// padding: 20rpx 10rpx;
		width: 100rpx;
		height: 84rpx;
		border-radius: 10rpx;
		font-size: 12px;
		color: #FFFFFF;
		background-color: #F56C6C;
		flex-shrink: 0;
	}
	.search-btn {
		// padding: 20rpx 10rpx;
		width: 100rpx;
		height: 84rpx;
		border-radius: 10rpx;
		font-size: 12px;
		color: #FFFFFF;
		background-color: #4B6DFD;
		flex-shrink: 0;
		margin-left: 20rpx;
	}

	// list
	.report-view-btn2 {
		width: 180rpx;
		height: 90rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #2F54EB;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #4B6DFD;
		margin-right: 20rpx;
	}

	.report-view-btn1 {
		width: 490rpx;
		height: 90rpx;
		background: #4B6DFD;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		letter-spacing: 10rpx;
	}

	.report-fixed-view {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 95%;
		padding: 20rpx;
	}

	.list-view {
		padding: 0rpx 30rpx 30rpx 30rpx;
	}

	.item-view {
		padding: 30rpx;
		border-bottom: 1px solid #E0E0E0;
		display: flex;
		align-items: center;
	}

	.list-item-icon {
		width: 1px;
		height: 30rpx;
		background-color: #DBDBDB;
		margin: 0 10rpx;
	}

	.jibie-icon:last-child {
		margin-right: 0;
	}

	.jibie-icon {
		padding: 5rpx 20rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #2F54EB;
		background: #EBF1FB;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		border: 1rpx solid #357CFF;
		margin-right: 20rpx;
	}

	// 筛选
	.filters-view {
		padding: 0 30rpx 10rpx 30rpx;
		border-bottom: 1px solid #DBDBDB;
	}
	
	.filters-view-item1:last-child{
		margin-right: 0;
	}

	.filters-view-item1 {
		flex: 1;
		border: 1px solid #DBDBDB;
		border-radius: 10rpx;
		padding: 20rpx 10rpx;
		margin-right: 10rpx;
	}

	.filters-view-item {
		flex: 1;
		border: 1px solid #DBDBDB;
		border-radius: 10rpx;
		padding: 20rpx 10rpx;
		margin-right: 10rpx;
	}

	// .filters-view-item1{
	// 	width: 1px;
	// 	height: 50rpx;
	// 	background-color: #DBDBDB;
	// 	margin-right: 20rpx;
	// }
	// 搜索
	.search-input {
		font-size: 15px;
		color: #333333;
		margin-left: 10rpx;
	}

	.search-view {
		// position: absolute;
		// top: 30rpx;
		// left: 30rpx;
		width: 670rpx;
		height: 40rpx;
		padding: 20rpx 10rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 12rpx 1rpx rgba(0, 0, 0, 0.28);
		border-radius: 10rpx;
		border: 1rpx solid #DBDBDB;
	}

	.pages-view {
		background-color: #FFFFFF;
		min-height: 100vh;
	}
</style>